<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :model="form" >
        <el-descriptions title="物品信息" style="text-align: center" :column="2" border >
          <el-descriptions-item :contentStyle="contentStyle"label="名称" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.dataname}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="分类" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.category}}</el-descriptions-item>

          <el-descriptions-item :contentStyle="contentStyle" label="存放位置" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.position}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="条码" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.barcode}}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions title="借阅人员信息" style="text-align: center" :column="2" border >
          <el-descriptions-item :contentStyle="contentStyle"label="姓名" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.username}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="编号" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.identifier}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="身份证号" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.idNumber}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="联系方式" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.contacttype}}</el-descriptions-item>
<!--          <el-descriptions-item :contentStyle="contentStyle" label="地图条码" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >-->
<!--            <el-button @click="hadledownload">下载</el-button></el-descriptions-item>-->
        </el-descriptions>
        <br/>
        <el-descriptions  title="借阅信息" style="text-align: center" :column="2" border >
          <el-descriptions-item :contentStyle="contentStyle" label="借阅日期" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            {{ form.borrowDate}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="归还日期" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            {{ form.givebackDate }}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="归还状态" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            <dict-tag :options="dict.type.yh_borrow_status" :value="form.givebackStatus"/>
          </el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="操作员" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            {{ form.borrowOperator }}</el-descriptions-item>

        </el-descriptions>

      </el-form>
      <br/>
      <div style="float:right; margin-bottom: 15px;">
        <el-button @click="viewCancel">返 回</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>

import {getBorrow} from "@/api/group/lyq/borrow";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import watermark from "watermark-dom";
import {treeselect} from "@/api/system/dept";
export default {
  name: "Map",
  dicts:['yh_borrow_status',],
  data() {
    return {
      contentStyle:{
        'width':'200px'
      },
      form:{},
      labelStyle: { 'width': '12%','color': '#000000','text-align': 'right', },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 部门树选项
      deptOptions: undefined,
      // 合同资料表格数据
      fileList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
    };
  },
  mounted() {
    watermark.load({ watermark_txt: "  "   });
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      // 获取表详细信息

      getBorrow(id).then(res => {

        this.form = res.data;
      });

    }
  },
  methods: {


    /** 关闭按钮 */
    viewCancel() {
      const id = this.$route.query.id;
      getBorrow(id).then(response => {
        this.form = response.data;
      });
      const obj = { path: "/borrow/borrowdengji", query: {id} };
      this.$tab.closeOpenPage(obj);
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    }
  },
};
</script>








